.hzdz-homepage-left-panel {
  background: #0a0e13;
  .top-wrap{
    height: 403px;
    width: 100%;
    margin-bottom: 20px;
  }
  .bottom-wrap{
    width: 100%;
    height: 648px;
  }
  .content-wrap {
    height: calc(100% - 62px);
    width: calc(100% - 10px);
    background: linear-gradient(180deg, rgba(20, 25, 31, 0.6) 0%, rgba(60, 66, 73, 0.6) 100%), linear-gradient(178deg, rgba(9, 11, 13, 0) 0%, #26394D 100%), radial-gradient(185% 43% at 53% -3%, rgba(166, 213, 255, 0.5) 0%, rgba(166, 209, 255, 0) 24%, rgba(179, 212, 255, 0) 100%);
    border: 1px solid rgba(77, 89, 102, 0.25);
    border-radius: 4px;
    padding: 10px 15px 0;
    box-sizing: border-box;
    .top-area {
      height: 80px;
      display: flex;
      flex-wrap: wrap;

      .top-item {
        width: calc(100% / 3);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: rgba(255, 255, 255, 1);
        font-size: 16px;

        .top-title {
          margin-bottom: 5px;
        }
      }
    }
    .bar-chart-area{
      margin-top: 10px;
    }
    .yibiao-area{
      width: 100%;
      height: 330px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 15px;
      .gauge-item{
        width: calc(100% / 3);
        height: calc(100% / 2);
        position: relative;
        .info {
          position: absolute;
          top: 60%;
          left: 50%;
          transform: translate(-50%, 0);
          display: flex;
          flex-direction: column;
          align-items: center;
          .percentage-wrapper {
            padding: 0 10px;
            background: linear-gradient( 90deg, rgba(52,165,255,0) 0%, rgba(52,165,255,0.39) 27%, rgba(52,165,255,0.45) 51%, rgba(52,165,255,0.35) 79%, rgba(0,139,255,0) 100%);
            margin-bottom: 10px;
            .percentage {
              font-weight: bold;
              font-size: 24px;
              background: linear-gradient(90deg, #FFFFFF 0%, #81C6FF 100%);
              background-clip: text;
              -webkit-background-clip: text;
              color: transparent;
              -webkit-text-fill-color: transparent;
            }
          }
          .title {
            color: rgba(255,255,255,0.8);
          }
        }
      }
    }
    .renyuan-area{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 15px;
      .ren-item{
        width: 49%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
        .ren-icon{
          width: 50px;
          height: 50px;
          background-size: cover;
          margin-right: 10px;
        }
        .ren-right{
          flex: 1;
          display: flex;
          align-items: center;
          color: rgba(255, 255, 255, 0.80);
          font-size: 16px;
          .title{
            width: 70px;
          }
          .value-bg{
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
    .value{
      font-size: 24px;
      font-family: 'DINAlternate';
      font-weight: bold;
      background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 3%, #81C6FF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }
  .bottom-line{
    border: 2px solid;
    border-image: linear-gradient(225deg, rgba(117, 170, 202, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(117, 170, 202, 0)) 2 2;
  }
  @media screen and (max-width: 1920px) {
    transform: scale(0.4862); // 1920/3952 ≈ 0.4862
    transform-origin: top left;
  }
  @media screen and (max-width: 1080px) {
    transform: scale(0.2733); // 1080/3952 ≈ 0.2733
    transform-origin: top left;
  }

  @media screen and (min-width: 5120px) {
    transform: scale(1.7778); // 5120/3952 ≈ 1.2955
    transform-origin: top left;
  }
}
